<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>朝阳区人房大数据</title>
<meta content="" name="Keywords">
<meta content="" name="Description">
<meta name="format-detection" content="telephone=no">
<link href="/static/css/ui.css" rel="stylesheet">
<link href="/static/css/grid.css" rel="stylesheet">
<link href="/web/css/style.css" rel="stylesheet">

<!--百度地图-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KRGn2GpEQXYKduXHZpeVGK0FeMU3ZvGZ"></script>
<script type="text/javascript" src="/static/lib/bmap/AreaRestriction_min.js"></script>
<script type="text/javascript" src="/static/lib/bmap/GeoUtils_min.js"></script>

<!--热力图-->
<script type="text/javascript" src="/static/lib/bmap/Heatmap_min.js"></script>

<!--富Marker定义类-->
<script type="text/javascript" src="/static/lib/bmap/RichMarker_min.js "></script>

<!--echarts-->
<script src="/static/lib/echarts/echarts.min.js"></script>
<script src="/static/lib/echarts/dark.js"></script>

</head>
<body>
<!--head-->
<header class="pageHeader fix">
    <div class="topLeft">
        <h1 class="logo"><a href="./" title="朝阳区人房大数据"><img src="/web/img/logo.png" alt="朝阳区人房大数据"></a></h1>
        <div class="area_select">
            <select class="top_select" name="select1">
                <option value="0" selected>全区</option>
                <option value="1">东风乡</option>
                <option value="2">平房区</option>
                <option value="3">东坝</option>
                <option value="4">将台</option>
                <option value="5">酒仙桥</option>
                <option value="6">麦子店</option>
                <option value="7">团结湖</option>
                <option value="8">六里屯</option>
                <option value="9">八里屯</option>
                <option value="10">呼家楼</option>
                <option value="11">三里屯</option>
                <option value="12">朝外</option>
                <option value="13">建外</option>
                <option value="14">高碑店</option>
                <option value="15">三间房</option>
                <option value="16">管庄</option>
                <option value="17">常营</option>
                <option value="18">金盏</option>
                <option value="19">孙河</option>
                <option value="20">崔各庄</option>
                <option value="21">来广营</option>
                <option value="22">奥运村</option>
                <option value="23">大屯</option>
                <option value="24">东湖</option>
                <option value="25">望京</option>
                <option value="26">亚运村</option>
                <option value="27">安贞</option>
                <option value="28">小关</option>
                <option value="29">和平街</option>
                <option value="30">太阳宫</option>
                <option value="31">香河园</option>
                <option value="32">左家庄</option>
                <option value="33">双井</option>
                <option value="34">劲松</option>
                <option value="35">潘家园</option>
                <option value="36">十八里店</option>
                <option value="37">小红门</option>
                <option value="38">南磨房</option>
                <option value="39">豆各庄</option>
                <option value="40">黑庄户</option>
                <option value="41">王四营</option>
                <option value="42">垈头</option>
                <option value="43">首都国际机场</option>
            </select>
        </div>
    </div>
    <nav class="pageNav">
        <ul class="fix">
            <li><a href="./" class="cur">首页</a></li>
            <li><a href="population_number.html">人口数量</a></li>
            <li><a href="population_structure.html">人口结构</a></li>
            <li><a href="housing_status.html">人居状况</a></li>
            <li><a href="analysis.html">分析预测</a></li>
        </ul>
    </nav>
    <div class="date r">
        2018年4月
    </div>
</header>
<!--head end-->
<!--main-->
<section class="pageMain indexMain">
    <div class="dPart indexLeft">
        <div class="sbox static" id="people_tj">
            <div class="row">
                <div class="span-6">
                    <div class="tjBox">
                        <div class="info">
                            <h3 class="title">实有人口</h3>
                            <div class="number digital_num color_green">4342642</div>
                        </div>
                    </div>
                </div>
                <div class="span-6">
                    <div class="tjBox">
                        <div class="info">
                            <h3 class="title">常住人口</h3>
                            <div class="number digital_num color_blue">3739053</div>
                        </div>
                    </div>
                </div>
                <div class="span-6">
                    <div class="tjBox">
                        <div class="info">
                            <h3 class="title">户籍人口</h3>
                            <div class="number digital_num color_orange">2105547</div>
                        </div>
                    </div>
                </div>
                <div class="span-6">
                    <div class="tjBox">
                        <div class="info">
                            <h3 class="title">流动人口</h3>
                            <div class="number digital_num color_purple">1530858</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sbox border resize" id="alerted">
            <div class="row">
                <div class="span-6">
                    <div class="charts" id="chart0"></div>
                </div>
                <div class="span-6">
                    <div class="charts" id="chart1"></div>
                </div>
                <div class="span-6">
                    <div class="charts" id="chart2"></div>
                </div>
                <div class="span-6">
                    <div class="charts" id="chart3"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="dPart indexRight">
        <div class="sbox static" id="house_tj">
            <div class="row">
                <div class="span-12">
                    <div class="tjBox house_bg">
                        <div class="info">
                            <h3 class="title">总居住面积</h3>
                            <span class="unit">单位：㎡</span>
                            <div class="number digital_num color_blue">7272356</div>
                        </div>
                    </div>
                </div>
                <div class="span-6">
                    <div class="tjBox">
                        <div class="info">
                            <h3 class="title">总户数</h3>
                            <div class="number digital_num color_orange">1538357</div>
                        </div>
                    </div>
                </div>
                <div class="span-6">
                    <div class="tjBox">
                        <div class="info">
                            <h3 class="title">住宅楼数</h3>
                            <div class="number digital_num color_purple">16000</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="comBox sbox border resize">
            <div class="filter_list">
                <div class="full-row">
                    <div class="span-6">
                        <!-- 人口结构 -->
                        <dl class="filter_box scroll_bar">

                            <dt><i class="fico"></i>性别</dt>
                            <dd>
                                <a href="javascript:void(0);" onclick="show_cover('male');">男</a>
                                <a href="javascript:void(0);" onclick="show_cover('female');">女</a>
                            </dd>

                            <dt><i class="fico fico2"></i>年龄</dt>
                            <dd>
                                <a href="javascript:void(0);">全部</a>
                                <a href="javascript:void(0);">0-14岁</a>
                                <a href="javascript:void(0);">15-64岁</a>
                                <a href="javascript:void(0);">65岁以上</a>
                            </dd>

                            <dt><i class="fico fico3"></i>民族</dt>
                            <dd>
                                <a href="javascript:void(0);">全部</a>
                                <a href="javascript:void(0);">汉族</a>
                                <a href="javascript:void(0);">蒙古族</a>
                                <a href="javascript:void(0);">回族</a>
                                <a href="javascript:void(0);">藏族</a>
                                <a href="javascript:void(0);">维吾尔族</a>
                                <a href="javascript:void(0);">其他民族</a>
                            </dd>

                            <dt><i class="fico fico4"></i>文化程度</dt>
                            <dd>
                                <a href="javascript:void(0);">全部</a>
                                <a href="javascript:void(0);">小学</a>
                                <a href="javascript:void(0);">初中</a>
                                <a href="javascript:void(0);">高中</a>
                                <a href="javascript:void(0);">大专</a>
                                <a href="javascript:void(0);">本科</a>
                                <a href="javascript:void(0);">硕士</a>
                                <a href="javascript:void(0);">博士</a>
                            </dd>

                            <dt><i class="fico fico5"></i>宗教信仰</dt>
                            <dd>
                                <a href="javascript:void(0);">全部</a>
                                <a href="javascript:void(0);">佛教</a>
                                <a href="javascript:void(0);">伊斯兰教</a>
                                <a href="javascript:void(0);">天主教</a>
                                <a href="javascript:void(0);">基督教</a>
                                <a href="javascript:void(0);">其他宗教</a>
                                <a href="javascript:void(0);">无宗教信仰</a>
                            </dd>

                            <dt><i class="fico fico6"></i>党派</dt>
                            <dd>
                                <a href="javascript:void(0);">全部</a>
                                <a href="javascript:void(0);">群众</a>
                                <a href="javascript:void(0);">中国共产党</a>
                                <a href="javascript:void(0);">中国国民党革命委员会</a>
                                <a href="javascript:void(0);">中国民主同盟</a>
                                <a href="javascript:void(0);">中国民主建国会</a>
                                <a href="javascript:void(0);">中国民主促进会</a>
                                <a href="javascript:void(0);">中国农工民主党</a>
                                <a href="javascript:void(0);">中国致公党</a>
                                <a href="javascript:void(0);">九三学社</a>
                                <a href="javascript:void(0);">台湾民主自治同盟</a>
                            </dd>

                            <dt><i class="fico fico7"></i>从业行业</dt>
                            <dd>
                                <a href="javascript:void(0);">全部</a>
                                <a href="javascript:void(0);">农业</a>
                                <a href="javascript:void(0);">建筑业</a>
                                <a href="javascript:void(0);">工业</a>
                                <a href="javascript:void(0);">批发和零售</a>
                                <a href="javascript:void(0);">住宿和餐饮</a>
                                <a href="javascript:void(0);">房地产开发经营业</a>
                                <a href="javascript:void(0);">服务业</a>
                                <a href="javascript:void(0);">金融业</a>
                            </dd>

                            <dt class="s_link no_dd" onclick="show_cover('hotPoints');"><i class="fico fico8"></i>人口密度</dt>
                            <dt class="s_link no_dd" onclick="show_cover('growth_rate');"><i class="fico fico9"></i>人口增长率</dt>

                        </dl>
                    </div>
                    <div class="span-6">
                        <!-- 人居状况 -->
                        <dl class="filter_box scroll_bar noborder">

                            <dt><i class="fico fico10"></i>房屋类型</dt>
                            <dd>
                                <a href="javascript:void(0);" onclick="show_cover('house_type_all');">全部</a>
                                <a href="javascript:void(0);" onclick="show_cover('house_type_weijian');">违建房</a>
                                <a href="javascript:void(0);" onclick="show_cover('house_type_pingfang');">平房</a>
                                <a href="javascript:void(0);" onclick="show_cover('house_type_bieshu');">别墅</a>
                                <a href="javascript:void(0);" onclick="show_cover('house_type_shangpin');">商品房</a>
                                <a href="javascript:void(0);" onclick="show_cover('house_type_other');">其他</a>
                            </dd>

                            <dt><i class="fico fico11"></i>房屋使用</dt>
                            <dd>
                                <a href="javascript:void(0);" onclick="show_cover('house_use_all');">全部</a>
                                <a href="javascript:void(0);" onclick="show_cover('house_use_zizhu');">自住</a>
                                <a href="javascript:void(0);" onclick="show_cover('house_use_zuyong');">租用</a>
                                <a href="javascript:void(0);" onclick="show_cover('house_use_shangyong');">商用</a>
                            </dd>

                            <dt><i class="fico fico12"></i>住宅高度</dt>
                            <dd>
                                <a href="javascript:void(0);">全部</a>
                                <a href="javascript:void(0);">多层住宅（4-6层）</a>
                                <a href="javascript:void(0);">中高层住宅（7-10层）</a>
                                <a href="javascript:void(0);">高层住宅（10层以上）</a>
                            </dd>

                            <dt><i class="fico fico13"></i>小区管理</dt>
                            <dd>
                                <a href="javascript:void(0);">全部</a>
                                <a href="javascript:void(0);">商业物业管理</a>
                                <a href="javascript:void(0);">老旧小区物业管理</a>
                                <a href="javascript:void(0);">无物业管理</a>
                            </dd>

                            <dt><i class="fico fico14"></i>家庭规模</dt>
                            <dd>
                                <a href="javascript:void(0);">全部</a>
                                <a href="javascript:void(0);">1人</a>
                                <a href="javascript:void(0);">2人</a>
                                <a href="javascript:void(0);">3人</a>
                                <a href="javascript:void(0);">4人及以上</a>
                            </dd>

                            <dt class="s_link no_dd" onclick="show_cover('house_num');"><i class="fico fico15"></i>房屋信息查询</dt>

                            <dt class="s_link no_dd" onclick="show_cover('people_num');"><i class="fico fico16"></i>人口信息查询</dt>

                        </dl>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="map_main" class="map_main">
        <div class="position"><i class="fico fico17"></i><span class="area" id="active_area">朝阳区</span></div>
        <!--性别-->
        <div class="ts_info" id="type1">
            <div class="dt_title">性别</div>
            <div>
                <ul>
                    <li class="color blue">数量（人）</li>
                </ul>
            </div>
        </div>
        <!--人口增长率-->
        <div class="ts_info" id="type2">
            <div class="dt_title">人口增长率</div>
            <div>
                <ul>
                    <li class="color org">最大增长率</li>
                    <li class="color green">最小增长率</li>
                    <li class="color blue">其他</li>
                </ul>
            </div>
        </div>
        <!--人口信息-->
        <div class="ts_info" id="type3">
            <div class="dt_title">人口信息</div>
            <div>
                <ul>
                    <li class="color blue">数量（人）</li>
                </ul>
            </div>
        </div>
        <!--房屋信息-->
        <div class="ts_info" id="type4">
            <div class="dt_title">房屋信息</div>
            <div>
                <ul>
                    <li class="color blue">数量（栋）</li>
                </ul>
            </div>
        </div>
        <div class="map_recovery" onclick="map_recovery();">地图复原</div>
        <div class="compass"></div>
        <div class="btn_3d"><a href="http://localhost:8080/springMVC/v1/household/index" target="_blank" id="3d">3D</a></div>
        <div class="btn_3d shequ_3d"><a href="http://localhost:8080/springMVC/v1/household/index?jd=东风乡&xq=石佛营东里" target="_blank" id="shequ_3d">社区3D</a></div>
        <div class="map_loading"></div>
        <div id="map_container" class="map_container"></div>
    </div>
</section>
<!--main end-->
<!--低版本ie提示 <ie10 -->
<div class="ieTip">
    <div class="box">
        <a href="http://down.360safe.com/se/360se9.1.0.338.exe" class="down_360">360浏览器9.1版本</a>
        <a href="http://sw.bos.baidu.com/sw-search-sp/software/14aca1f5063ab/ChromeStandalone_59.0.3071.115_Setup.exe" class="down_chrome">谷歌浏览器</a>
    </div>
</div>
<!--低版本ie提示 end-->
<script src="/static/modules/seajs/sea.js" id="seajsnode"></script>
<script src="/web/seajs.config.js"></script>
<script>seajs.use("js/index");</script>
</body>
</html>